<template>
  <div class="article">
    <!-- 时间筛选 -->
    <el-row style="margin-bottom:20px;">
      <el-col :span="10" :offset="14" style="text-align:right;">
        <span>时间筛选：</span>
        <el-select v-model="timeWay" style="width:100px;">
          <el-option
            v-for="item in timeWayOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-date-picker
          v-show="timeWay== 'timeDay'"
          v-model="dayValue"
          align="right"
          type="date"
          placeholder="选择日期"
        />
        <el-date-picker
          v-show="timeWay== 'timeWeek'"
          v-model="WeekValue"
          type="week"
          format="yyyy 第 WW 周"
          placeholder="选择周"
        />
        <el-date-picker
          v-show="timeWay== 'timeMonth'"
          v-model="monthValue"
          type="month"
          placeholder="选择月"
        />
        <el-date-picker
          v-show="timeWay== 'timeCustom'"
          v-model="customValue"
          type="daterange"
          range-separator="|"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width:240px;"
        />
      </el-col>
    </el-row>
    <!-- 商品总览 -->
    <div class="class-nav clearfix">
      <div class="class-title">
        <span>商品总览</span>
      </div>
    </div>
    <template v-for="(item,index) in overviewList">
      <div :key="index" class="columnList">
        <div class="columnList-label">{{ item.label }}</div>
        <ul class="columnList-wrap">
          <li v-for="(item1,index1) in item.list" :key="index1" class="columnList-item">
            <img :src="item1.img" >
            <div class="columnList-item-info">
              <div class="columnList-item-title">
                <span>{{ item1.title }}</span>
                <el-tooltip :content="item1.hint" class="item" effect="light" placement="top">
                  <i class="el-icon-info" />
                </el-tooltip>
              </div>
              <div class="columnList-item-data">{{ item1.data }}</div>
            </div>
          </li>
        </ul>
      </div>
    </template>

    <!-- 商品排行 -->
    <div class="class-nav clearfix">
      <div class="class-title">
        <span>商品排行</span>
      </div>
    </div>
    <div style="margin:20px 0;">
      <el-row :gutter="50">
        <el-col :span="12">
          <div style="margin:20px 0;color:#353535;font-size:14px;">
            <span>访客榜TOP5商品</span>
            <el-tooltip class="item" effect="light" placement="top">
              <div slot="content">
                筛选时间内，店铺内访客数最高5个商品（商品仅包括需要付费的单品、专栏、
                <br >大专栏、会员、训练营、社群、活动）。 转化率：付费用户数/访客数
              </div>
              <i class="el-icon-info" />
            </el-tooltip>
          </div>
          <el-table
            :data="visitorTopTableData"
            :header-cell-style="{background:'#eef1f6',}"
            border
            style="width: 100%"
          >
            <el-table-column prop="number" label="排行" align="center" />
            <el-table-column prop="name" label="商品名称" align="center" />
            <el-table-column prop="articleView" label="商品访客数" align="center" />
            <el-table-column prop="conversion" label="转化率" align="center" />
          </el-table>
        </el-col>
        <el-col :span="12">
          <div style="margin:20px 0;color:#353535;font-size:14px;">
            <span>支付榜TOP5商品</span>
            <el-tooltip class="item" effect="light" placement="top">
              <div slot="content">
                筛选时间内，店铺内付费用户数最多的5个商品（商品仅包括需要、
                <br >付费的单品、专栏、大专栏、训练营、会员、社群、活动）
              </div>
              <i class="el-icon-info" />
            </el-tooltip>
          </div>
          <el-table
            :data="payTopTableData"
            :header-cell-style="{background:'#eef1f6',}"
            border
            style="width: 100%"
          >
            <el-table-column prop="number" label="排行" align="center" />
            <el-table-column prop="name" label="商品名称" align="center" />
            <el-table-column prop="articleView" label="商品访客数" align="center" />
            <el-table-column prop="conversion" label="转化率" align="center" />
          </el-table>
        </el-col>
      </el-row>
    </div>
    <!-- 商品效果 -->
    <div class="class-nav clearfix">
      <div class="class-title">
        <span>商品效果</span>
      </div>
      <div class="class-slot">
        <div>
          <el-select v-model="goodsType" style="width:200px;" @change="searchGoods">
            <el-option
              v-for="item in goodsTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
    </div>
    <el-table
      v-loading="loading"
      :data="resultTableData"
      :header-cell-style="{background:'#eef1f6',}"
      border
      style="width: 100%;margin:20px 0;"
    >
      <el-table-column prop="number" label="排名" align="center" />
      <el-table-column prop="name" label="商品名称" align="center" />
      <el-table-column prop="visitorVolume" label="访问量" align="center" />
      <el-table-column prop="visitorNum" label="访客数" align="center" />
      <el-table-column prop="takeVolume" label="订阅量" align="center" />
      <el-table-column prop="userPay" label="付费用户" align="center" />
      <el-table-column prop="amount" label="结算金额" align="center" />
      <el-table-column prop="conversion" label="转化率" align="center" />
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      overviewList: [
        {
          label: '在售商品',
          list: [
            {
              img: '/src/assets/analyze_data/onlineSale.png',
              title: '在售商品',
              hint: '当前时间，状态为已上架的付费商品数量(不包括停售的商品)',
              data: '52'
            }
          ]
        },
        {
          label: '系列课程',
          list: [
            {
              img: '/src/assets/analyze_data/column_more.png',
              title: '大专栏',
              hint: '当前时间，状态为已上架的付费大专栏数量(不包括停售的大专栏)',
              data: '52'
            },
            {
              img: '/src/assets/analyze_data/merber.png',
              title: '会员',
              hint: '当前时间，状态为已上架的付费会员数量(不包括停售的会员)',
              data: '32'
            },
            {
              img: '/src/assets/analyze_data/column.png',
              title: '专栏',
              hint: '当前时间，状态为已上架的付费专栏数量(不包括停售的专栏)',
              data: '42'
            },
            {
              img: '/src/assets/analyze_data/camp.png',
              title: '训练营',
              hint: '当前时间，状态为已上架的训练营营期数量',
              data: '12'
            }
          ]
        },
        {
          label: '单品课程',
          list: [
            {
              img: '/src/assets/analyze_data/broadcast.png',
              title: '直播',
              hint: '当前时间，状态为已上架的可单卖的付费直播数量(不包括已停售的直播单品)',
              data: '8'
            },
            {
              img: '/src/assets/analyze_data/audio.png',
              title: '音频',
              hint: '当前时间，状态为已上架的可单卖的付费音频数量(不包括停售的音频单品)',
              data: '40'
            },
            {
              img: '/src/assets/analyze_data/e_book.png',
              title: '电子书',
              hint: '当前时间，状态为已上架的可单卖的付费电子书(不包括已停售的电子书)',
              data: '42'
            },
            {
              img: '/src/assets/analyze_data/article.png',
              title: '图文',
              hint: '当前时间，状态为已上架的可单卖的付费图文数量(不包括停售的图文单品)',
              data: '12'
            },
            {
              img: '/src/assets/analyze_data/vedio.png',
              title: '视频',
              hint: '当前时间，状态为已上架的可单卖的付费视频数量(不包括已停售的视频单品)',
              data: '32'
            }
          ]
        },
        {
          label: '社群互动',
          list: [
            {
              img: '/src/assets/analyze_data/activity.png',
              title: '活动',
              hint: '当前时间，在售票的活动数量',
              data: '16'
            },
            {
              img: '/src/assets/analyze_data/interlocution.png',
              title: '问答',
              hint: '当前时间，问答区域可以回答问题的答主数量',
              data: '65'
            },
            {
              img: '/src/assets/analyze_data/summity.png',
              title: '社区',
              hint: '当前时间，需要付费进入的社群数量',
              data: '9'
            }
          ]
        }
      ],
      dayValue: '',
      WeekValue: '',
      monthValue: '',
      customValue: '',
      timeWay: 'timeDay',
      goodsType: '',
      loading: false,
      timeWayOptions: [
        {
          value: 'timeDay',
          label: '自然天'
        }, {
          value: 'timeWeek',
          label: '自然周'
        }, {
          value: 'timeMonth',
          label: '自然月'
        }, {
          value: 'timeCustom',
          label: '自定义'
        }
      ],
      goodsTypeOptions: [
        {
          value: 'article',
          label: '图文'
        },
        {
          value: 'audio',
          label: '音频'
        },
        {
          value: 'vedio',
          label: '视频'
        },
        {
          value: 'broadcast',
          label: '直播'
        },
        {
          value: 'member',
          label: '会员'
        },
        {
          value: 'column',
          label: '专栏'
        },
        {
          value: 'summity',
          label: '社区'
        },
        {
          value: 'column_more',
          label: '大专栏'
        },
        {
          value: 'activity',
          label: '活动'
        },
        {
          value: 'interlocution',
          label: '问答'
        },
        {
          value: 'ebook',
          label: '电子书'
        },
        {
          value: 'camp',
          label: '训练营'
        }
      ],
      visitorTopTableData: [
        {
          number: '1',
          name: '高中语文作文',
          articleView: '166',
          conversion: '35%'
        },
        {
          number: '1',
          name: '高中语文作文',
          articleView: '166',
          conversion: '35%'
        },
        {
          number: '1',
          name: '高中语文作文',
          articleView: '166',
          conversion: '35%'
        },
        {
          number: '1',
          name: '高中语文作文',
          articleView: '166',
          conversion: '35%'
        },
        {
          number: '1',
          name: '高中语文作文',
          articleView: '166',
          conversion: '35%'
        }
      ],
      payTopTableData: [
        {
          number: '1',
          name: '逻辑思维',
          articleView: '166',
          conversion: '35%'
        },
        {
          number: '1',
          name: '逻辑思维',
          articleView: '166',
          conversion: '35%'
        },
        {
          number: '1',
          name: '逻辑思维',
          articleView: '166',
          conversion: '35%'
        },
        {
          number: '1',
          name: '逻辑思维',
          articleView: '166',
          conversion: '35%'
        },
        {
          number: '1',
          name: '逻辑思维',
          articleView: '166',
          conversion: '35%'
        }
      ],
      resultTableData: [
        {
          number: '1',
          name: '高中语文',
          visitorVolume: '163',
          visitorNum: '85',
          takeVolume: '35',
          userPay: '18',
          amount: '1699',
          conversion: '15%'
        }
      ]
    }
  },
  methods: {
    searchGoods(val) {
      console.log(val)
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.article {
  padding: 10px;
  padding-bottom: 40px;
}
.columnList {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 14px;
  .columnList-label {
    order: 1;
    font-size: 14px;
    color: #353535;
    margin-right: 40px;
    min-width: 66px;
  }
  .columnList-wrap {
    display: flex;
    order: 2;
    flex-direction: row;
    padding: 0;
    .columnList-item {
      display: flex;
      flex-direction: row;
      width: 190px;
      img {
        order: 1;
        width: 48px;
        height: 48px;
        margin-right: 10px;
      }
      .columnList-item-info {
        order: 2;
        .columnList-item-title {
          color: #353535;
          font-size: 14px;
          display: inline-block;
          margin-bottom: 5px;
          margin-right: 10px;
          i {
            margin-left: 10px;
            color: #b2b2b2;
          }
        }
        .columnList-item-data {
          display: block;
          font-size: 20px;
        }
      }
    }
  }
}
</style>
